<template>
	<div class="search-container">
		<el-form label-position="top" label-width="80px" :model="form">
			<el-form-item label="业务场景名称">
				<el-input placeholder="请输入业务场景名称" v-model="form.name"></el-input>
			</el-form-item>
			<el-form-item label="创建时间">
				<el-col :span="11">
					<el-date-picker v-model="form.startTime" type="datetime" placeholder="选择日期时间" align="right" :picker-options="pickerOptions"> </el-date-picker>
				</el-col>
				<el-col class="scene-line" :span="2">-</el-col>
				<el-col :span="11">
					<el-date-picker v-model="form.endTime" type="datetime" placeholder="选择日期时间" align="right" :picker-options="pickerOptions"> </el-date-picker>
				</el-col>
			</el-form-item>
			<el-form-item label="创建人ID">
				<el-input placeholder="请输入创建人ID" v-model="form.createPersonId"></el-input>
			</el-form-item>
			<el-form-item label="" class="btn">
				<el-button @click="searchData">检索</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
export default {
	data() {
		return {
			form: {
				createPersonId: '',
				startTime: '',
				endTime: '',
				name: ''
			},
			pickerOptions: {
				shortcuts: [
					{
						text: '今天',
						onClick(picker) {
							picker.$emit('pick', new Date());
						}
					},
					{
						text: '昨天',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24);
							picker.$emit('pick', date);
						}
					},
					{
						text: '一周前',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', date);
						}
					}
				]
			}
		};
	},
	methods: {
		searchData() {
			this.form.startTime = this.form.startTime ? this.$moment(this.form.startTime).toISOString() : '';
			this.form.endTime = this.form.endTime ? this.$moment(this.form.endTime).toISOString() : '';
			this.$emit('searchData', this.form);
		}
	}
};
</script>

<style lang="less" scoped>
.search-container {
	height: 100px;
	.el-form {
		display: flex;
		.el-form-item {
			padding-right: 18px;
		}

		.btn {
			padding: 0;
			.el-button {
				height: 34px;
				width: 64px;
				padding: 0;
				border: 1px solid #6384fe;
				color: #6384fe;
			}
		}
	}
}
</style>

<style lang="less">
.search-container {
	.el-form-item {
		label {
			padding: 0;
		}
		input {
			height: 34px;
		}
	}
	.btn {
		.el-form-item__content {
			line-height: 120px;
		}
	}
	.scene-line {
		text-align: center;
		padding: 0 10px;
	}
}
</style>
